
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <link rel="stylesheet" type="text/css" href="./css/generic.css"/>
        <script src="jslib/prototype.js" type="text/javascript"></script>
        <script src="jslib/ef/scriptaculous.js" type="text/javascript"></script>
        <script src="jslib/jb.core.js" type="text/javascript"></script>
        <script src="jslib/jb.ajax.js" type="text/javascript"></script>
        <script src="jslib/jb.designer.js" type="text/javascript"></script>
        <script type="text/javascript">
function doScrolled(ele, dir)
{
    if(dir=='v')
        $('viewport').style.top = (-ele.scrollTop)+'px';
    else
        $('viewport').style.left = (-ele.scrollLeft)+'px';
}

</script>
    </head>
    <body style="margin:0px;"><div style="width:424px;background-color:silver;">
            <div style="width:424px;height:230px;">
                <div style="width:424px;height:20px;">Header</div>
                 
                <div style="width:400px;height:200px;overflow:hidden;float:left;">
                    <div id="viewport" style="position:relative;width:1px;height:1px;">
                        <div id="viewport1"
                             style="position:absolute;padding:0px;width:800px;height:800px;border:1px solid green;">
                             
                             
            <table id="d12312_table" cellpadding="0px" border="1" cellspacing="0px">
            <tbody>
                   
                    <tr>
                        <td >
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>da</td>
                        <td>d</td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td> 
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>
                            <div style="white-space:nowrap;overflow:hidden;background-color:red;">dasASDFadasdfasdafAS fa</div>
                        </td>
                        <td>d</td>
                        <td>d</td>
                    </tr>
                </tbody>
            </table>

                             
                             </div>
                    </div>
                </div>
                 
                <div style="width:22px;height:200px;overflow:auto;float:left;" onscroll="doScrolled(this, 'v');">
                    <div style="height:800px;">&nbsp;</div>
                </div>
            </div>
             
            <div style="height:20px;width:424px;background-color:gray;">
                <div style="height:20px;width:400px;overflow:auto;" onscroll="doScrolled(this, 'h');">
                    <div style="width:800px;font-size:1px;height:1px;">&nbsp;</div>
                </div>
            </div>
        </div></body>
</html>